<template>
  <div>
    <f-table ref="table" rowKey="paymentId" size="small" :showSetting="true" setting-key='iv3' :operator='operator'  :tableColumns="columns" :multiple="false" :scroll="{x:true}"
             :params="queryParam" :api="api.payment" handler="invoicePaymentPageListHandler">
         <span slot="paymentState" slot-scope="text, record, index">
            <a-tag color="#87d068" v-if="text==0">未提交</a-tag>
             <a-tag color="#87d068" v-if="text==1" @click="processImg(record)">{{record.taskName}}</a-tag>
           <a-tag color="#f50" v-if="text==2">已支付</a-tag>
        </span>
      <span slot="invoiceType" slot-scope="text, record, index">
            <a-tag color="#87d068" v-if="text==1">普票</a-tag>
            <a-tag color="#108ee9" v-if="text==2">专票</a-tag>
        </span>
      <span slot="action" slot-scope="text, record">
          <template>
            <a @click="startProcess(record)" v-if="record.paymentState==0">提交审批</a>
            <a @click="completeTask(record)" v-if="record.taskDefinitionKey&&record.taskDefinitionKey=='__initiator__'">提交审批</a>
            <a-divider type="vertical"
                       v-if="record.paymentState==0||(record.taskDefinitionKey&&record.taskDefinitionKey=='__initiator__')"/>
            <a @click="$refs.drawer.showDrawer(record,'form2')">查看</a>
            <a-divider type="vertical"/>
          </template>
          <a-dropdown>
            <a class="ant-dropdown-link">更多 <a-icon type="down"/></a>
            <a-menu slot="overlay">
                <a-menu-item v-if="record.paymentState==1">
                <a href="javascript:;" @click="processImg(record)">审批进度</a>
              </a-menu-item>
                <a-menu-item>
                <a href="javascript:;" @click="printKpsq(record)">开票申请单</a>
              </a-menu-item>
              <a-menu-item>
                <a href="javascript:;" @click="printPayment(record)">资金支付单</a>
              </a-menu-item>
              <a-menu-item v-if="record.paymentState==0||record.taskDefinitionKey=='__initiator__'">
                <a href="javascript:;"
                   @click="$refs.table.del(record,{handlerName:'invoicePaymentDeleteHandler'})">删除</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
    </f-table>
    <invoice-drawer ref="drawer"></invoice-drawer>
    <process-image ref="processImg" v-if="processImageVisible" :visible.sync="processImageVisible"
                   :processInstanceId="processInstanceId"></process-image>
    <print-modal ref="printModal"></print-modal>
  </div>
</template>
<script>

  import api from './../js/api'
  import InvoiceDrawer from './invoice_drawer'
  import ProcessImage from '../../../flowable/process/process_image'
  import PrintModal from '../print/print_modal'

  export default {
    name: 'InvoiceYes',
    components: { PrintModal, InvoiceDrawer, ProcessImage },
    data() {
      let me = this
      let operator = []

      return {
        api: Object.assign(api, this.api),
        //列表初始化查询参数
        queryParam: { paymentState: 2,
              deptId:"",
              beginDate:""
        },
        processImageVisible: false,
        scroll: { x: true },
        operator: operator,
        // 表头
        columns: [
          {
            title: '#',
            width: '50px',
            fixed: 'left',
            align: 'center',
            customRender: (text, record, index) => index + 1
          },
          {
            title: '操作',
            align: 'center',
            fixed: 'left',
            width: '130px',
            scopedSlots: { customRender: 'action' }
          },
          {
            title: '单号',
            align: 'left',
            fixed: 'left',
            width: '135px',
            dataIndex: 'paymentNo'
          },
          {
            title: '供货商',
            align: 'left',
            width: '160px',
            ellipsis: true,
            dataIndex: 'supplierName'
          },

          {
            title: '应返金额',
            align: 'left',
            width: '80px',
            dataIndex: 'supplierRetable'
          },
          {
            title: '开票金额',
            align: 'left',
            width: '80px',
            dataIndex: 'invoiceAmount'
          },
          {
            title: '税金金额',
            align: 'left',
            width: '80px',
            dataIndex: 'amount'
          },
          {
            title: '开票单位',
            align: 'left',
            width: '190px',
            ellipsis: true,
            dataIndex: 'invoiceunitName'
          },
          {
            title: '收款账户',
            align: 'left',
            width: '180px',
            ellipsis: true,
            dataIndex: 'bankName'
          },
          {
            title: '发票类型',
            align: 'left',
            width: '70px',
            dataIndex: 'invoiceType',
            scopedSlots: { customRender: 'invoiceType' }
          },
          {
            title: '开票日期',
            align: 'left',
            width: '100px',
            dataIndex: 'amountDate'
          },
          {
            title: '支付日期',
            align: 'left',
            width: '100px',
            dataIndex: 'payDate'
          },
          {
            title: '申请人',
            align: 'left',
            width: '80px',
            dataIndex: 'nickName'
          },
          {
            title: '审批状态',
            align: 'left',
            dataIndex: 'paymentState',
            width: '90px',
            fixed: 'right',
            scopedSlots: { customRender: 'paymentState' }
          },
          {
            title: '创建日期',
            align: 'left',
            fixed: 'right',
            sorter:true,
            width: '150px',
            dataIndex: 'createTime'
          }
        ]
      }
    },
    created() {
      this.setOperator(this.queryParam);
    },
    methods: {
      //流程图
      processImg(order) {
        this.processInstanceId = order.processInstanceId
        this.processImageVisible = true
      },
      setOperator(queryParam){
        this.operator=[];
        this.operator.push({
          name: "导出开票单",
          icon: "transaction",
          that: this,
          handler: function(table, that) {
            that.http.exportExcel(that, {
              url: that.api.payment.exportInvoiceDetails,
              data: {
                ...queryParam,
                handlerName:'exportInvoiceListHandler',
                columns:"[{name:'单号',key:'paymentNo'},{name:'供货商',key:'supplierName'},{name:'应返金额',key:'supplierRetable',isStatistics:true},{name:'开票金额',key:'invoiceAmount',isStatistics:true},{name:'税金金额',key:'amount',isStatistics:true},{name:'开票单位',key:'invoiceunitName'},{name:'收款账户',key:'bankName'},{name:'开票日期',key:'amountDate'},{name:'支付日期',key:'payDate'},{name:'申请人',key:'nickName'}]"
              }
            })
          }
        })
      },
      //重新提交
      completeTask(paymentId) {
        this.http.confirm(this, {
          content: '确认提交审批吗?',
          url: api.tasktodo.complete,
          requestBody: true,
          data: {
            taskId: paymentId.taskId
          },
          success: function(me, data) {
            me.$refs.table.refresh()
          }
        })
      },
      //提交审批
      startProcess(order) {
        this.http.confirm(this, {
          content: '确认提交审批吗?',
          url: api.processInstance.start,
          requestBody: true,
          data: {
            handlerName: 'paymentPayStartProcessHandler',
            businessKey: order.paymentId
          },
          success: function(me, data) {
            me.$refs.table.refresh()
          }
        })
      },
      //刷新列表
      onLoad() {
        this.$refs.table.refresh()
      },
      //打印开票单
      printKpsq(record) {
        this.$refs['printModal'].open(record.paymentId, 3, 'Invoice')
      },
      //打印资金支付单
      printPayment(record) {
        this.$refs['printModal'].open(record.paymentId, 2, 'Invoice')
      },
      //列表查询
      searchHandler(searchParams) {
        this.queryParam = Object.assign(this.queryParam, searchParams)
        this.$refs.table.refresh(true, searchParams)
        this.setOperator(searchParams);
      }
    }
  }
</script>
